<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img {
				transition: .25s allow-discrete;
				opacity: 1;
				@starting-style {
					opacity: 0;
				}
			}
			
			img[hidden] {
			    opacity: 0;
			}
		</style>
	</head>
	<body>
		<a href="https://www.zhangxinxu.com/wordpress/2024/06/css-transition-behavior/">过渡离散属性</a>
		<button id="trigger">图片显示与隐藏</button><br />
		<img id="target" src="../image/bg.jpg" width="600" />
		<script>
			trigger.onclick = function () {
			    target.toggleAttribute('hidden');	
			};
		</script>
	</body>
</html>